<template>
  <div class="box2">
    <h3>我是box2组件</h3>
    <hr />
    <p>
      通过 vuex 中的getters方法直接返回count值: {{ $store.getters.showCount }} ,
      不用在box2组件里通过计算属性的方法拿到值了
    </p>
    <p>count的值是： {{ num }}</p>
    <button @click="add">+1</button>
    <button @click="Nadd">+2</button>
    <button @click="time">异步操作 定时器 +1</button>
    <button @click="time2">异步操作 定时器 +2 传参</button>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      default: '', //默认值
      type: Number
    }
  },
  // data() {
  //   return {
  //     num: this.count
  //   }
  // }
  methods: {
    // vuex 数据共享，调用 store/tab.js文件下的 COuntGb 方法
    add() {
      this.$store.commit('COuntAdd')
    },
    // 传参 2 每一次 +2
    Nadd() {
      this.$store.commit('Nadd', 2)
    },
    // 调用 actions 异步操作 定时器 1s后 +1
    time() {
      this.$store.dispatch('AddYb')
    },
    // 调用 actions 异步操作 定时器 传参
    time2() {
      this.$store.dispatch('AddYb2', 2)
    }
  },
  computed: {
    // vuex 数据传递
    // num 是  store/tab.js文件下的  数据 可以共享出来
    num() {
      //   return this.$store vuex固定写法
      return this.$store.state.tab.count
    }
  }
}
</script>

<style>
.box2 {
  float: left;
  width: 50%;
  height: 300px;
  background: rgb(133, 173, 181);
}
</style>
